<template>
  <div class="goodMovie">
    <div class="good">
        最受好评的电影
    </div>
    <div class="good-list">
      <div class="swiper mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="item in goodMovie" :key="item.id">
            <div class="img">
              <img :src="require(`../../assets/images/movie/${item.url}`)" alt="">
              </div>
              <p class="title">
                {{item.title}}
              </p>
              <div class="op" ref="op">
              </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import Swiper from 'swiper'

import "swiper/css/swiper.css"
import {getAllPro } from '@/api/request'
export default {
    data() {
      return {
        goodMovie:[],
      }
    },
    created(){
      getAllPro("/goodMovie").then(res=>{
        let {data} = res
        this.goodMovie = data.goodMovie
      })
    },
    watch:{
      goodMovie(){
        this.$nextTick(()=>{
        var swiper = new Swiper(".mySwiper", {
          slidesPerView: 3,
          spaceBetween: 30,
          pagination: {
            el: ".swiper-pagination",
            clickable: true,
          },
        });
      })
      }
    }
}
</script>

<style lang="scss" scoped>
  
  
  .goodMovie{
    margin: .4rem .5rem .2rem .3rem;

    .good{
      margin-bottom:.3rem ;
      font-size: .32rem;
    }

  .good-list{
    overflow: hidden;
    .swiper{
      width: 6.2rem;
      height: 3.1rem;
      .swiper-slide{
        img{
          width: 100%;
        }

        .title{
          white-space: nowrap; 
          overflow: hidden;
          text-overflow: ellipsis;
          margin-bottom: .2rem;
        }
      }
    }
  }
    
  }
</style>